<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        canvas {
            display:block;
            margin:20px auto;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas width="800" height="500"></canvas>
    <script>
        var cas = document.querySelector('canvas');
        var ctx = cas.getContext('2d');
        function toRadian(angle){
            return angle * Math.PI / 180;
        }
        // ctx.moveTo(100,100);
        var x = 100,y = 100,r = 100,start = -60 , end = 60;
        ctx.moveTo(
                x + r * Math.cos(toRadian(start)),
                y + r * Math.sin(toRadian(start))
            );
        ctx.lineTo(x + r * Math.cos(toRadian(start)) + 100,y + r * Math.sin(toRadian(start)));
        ctx.moveTo(
                x + r * Math.cos(toRadian(start)),
                y + r * Math.sin(toRadian(start))
            );
        ctx.arc(x,y,r,toRadian(start),toRadian(end));
        ctx.stroke();
        ctx.fill();
    </script>
</body>
</html>